import { useState } from 'react';
import ChartContainer from './ChartContainer';
import DataTable from './DataTable';
import CodeBlock from './CodeBlock';
import ProcessFlow from './ProcessFlow';
import Tabs, { Tab } from './Tabs';
import './MessageComponent.css';

const MessageComponent = ({ message, nodeFlow, isStreaming, isLatestMessage }) => {
  const [copied, setCopied] = useState(false);
  // 移除expandedCards状态，现在使用Tabs组件

  const handleCopyMessage = async () => {
    let content = '';
    if (message.type === 'user') {
      content = message.content;
    } else {
      content = message.answer || '';
      if (message.sql) content += '\n\nSQL:\n' + message.sql;
    }
    
    await navigator.clipboard.writeText(content);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  // 移除toggleCard函数，现在使用Tabs组件

  if (message.type === 'user') {
    return (
      <div className="message user-message">
        <div className="message-header">
          <div className="avatar user-avatar">👤</div>
          <span className="sender-name">您</span>
          <span className="message-badge user-badge">用户</span>
          <span className="timestamp">
            {message.timestamp.toLocaleTimeString()}
          </span>
        </div>
        <div className="message-content">
          <div className="text-content">
            {message.content}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="message ai-message">
      <div className="message-header">
        <div className="avatar ai-avatar">🤖</div>
        <span className="sender-name">AI助手</span>
        <span className="message-badge ai-badge">AI</span>
        <span className="timestamp">
          {message.timestamp.toLocaleTimeString()}
        </span>
        <button 
          className="copy-button"
          onClick={handleCopyMessage}
          title="复制消息"
        >
          {copied ? '✓' : '📋'}
        </button>
      </div>
      
      {/* 处理流程 - 仅在最新的AI消息且正在处理时显示 */}
      {isLatestMessage && nodeFlow && nodeFlow.length > 0 && (
        <ProcessFlow nodeFlow={nodeFlow} isStreaming={isStreaming} />
      )}

      {/* 文本回复 - 独立显示 */}
      {message.answer && (
        <div className="message-text">
          <div className="text-content">
            {message.answer}
          </div>
        </div>
      )}
      
      {/* 数据内容 - 使用Tabs展示 */}
      {(message.chart || message.data?.records || message.sql) && (
        <div className="data-tabs">
          <Tabs defaultActiveTab={message.chart ? 2 : (message.data?.records ? 1 : 0)}>
            {/* SQL Tab */}
            {message.sql && (
              <Tab 
                label="SQL语句" 
                icon="💻" 
                title="查看执行的SQL语句"
              >
                <div className="tab-content-wrapper">
                  <div className="tab-actions">
                    <button className="action-btn" title="复制代码">📋</button>
                    <button className="action-btn" title="格式化">✨</button>
                  </div>
                  <CodeBlock language="sql" code={message.sql} />
                </div>
              </Tab>
            )}
            
            {/* 数据表格 Tab */}
            {message.data?.records && (
              <Tab 
                label="查询结果" 
                icon="📋" 
                badge={message.data.records.length}
                title="查看查询结果数据"
              >
                <div className="tab-content-wrapper">
                  <div className="tab-actions">
                    <button className="action-btn" title="导出CSV">📥</button>
                    <button className="action-btn" title="全屏查看">⛶</button>
                  </div>
                  <DataTable data={message.data.records} />
                </div>
              </Tab>
            )}
            
            {/* 图表 Tab */}
            {message.chart && (
              <Tab 
                label="数据图表" 
                icon="📊" 
                title="查看数据可视化图表"
              >
                <div className="tab-content-wrapper">
                  <div className="tab-actions">
                    <button className="action-btn" title="全屏查看">⛶</button>
                    <button className="action-btn" title="下载图片">📥</button>
                  </div>
                  <ChartContainer data={message.chart} />
                </div>
              </Tab>
            )}
          </Tabs>
        </div>
      )}
    </div>
  );
};

export default MessageComponent;
